<template>
    <div class="register">
<van-nav-bar  
      @click-left="$router.back()"
      left-text="返回" 
      :title="title">
      </van-nav-bar>
<!-- {{form}} -->
<div class="form">
    <div class="re"> 新用户注册</div>
<van-form  @submit="register">
  <van-field
    v-model="form.username"
    class="radius"
    colon
    abel-width="4em"
    name="用户名"
    label="用户名"
    placeholder="用户名"
    :rules="[{ required: true, message: '请填写用户名' }]"
  />
  <van-field
    v-model="form.password"
        colon
    abel-width="4em"
    type="password"
    name="密码"
    label="密码"
    placeholder="密码"
    :rules="[{ required: true, message: '请填写密码' }]"
  />
    <van-field
    v-model="form.realname"
        colon
    abel-width="4em"
    name="姓名"
    label="姓名"
    placeholder="姓名"
    :rules="[{ required: true, message: '请填写姓名' }]"
  />
    <van-field
    v-model="form.telephone"
        colon
    abel-width="4em"
    name="电话"
    label="电话"
    placeholder="电话"
    :rules="[{ required: true, message: '请填写电话' }]"
  />
   <van-field class="bot" name="radio" label="性别"
       colon
    abel-width="4em">
  <template #input>
    <van-radio-group v-model="form.gender" direction="horizontal">
      <van-radio name="male">男</van-radio>
      <van-radio name="female">女</van-radio>
    </van-radio-group>
  </template>
</van-field>
  <div style="margin: 16px;">
    <van-button round type="primary" block native-type="submit" >提交</van-button>
  </div>
</van-form>
</div>
    </div>
</template>
<script>
import {post} from "../utils/request.js"
import {Toast} from "vant"
import { Button } from 'vant';
export default {
    setup(){
    },
    data(){
        return{
            form:{
                username:'',
                password:"",
                realname:"",
                gener:"male",

            }
        }
    },
    methods:{
            register ( ){
            let user = this.form 
            let url = "/user/register";
            post(url, user).then((resp)=>
            {
                // console.log(resp.message)
                if (resp.massage==="注册成功,请登录")
                {Toast.success('注册成功');}
                else{
                    Toast.fail(JSON.stringify(resp.message));
                }
            })
        }
    },
    mounted(){
    }
}
</script>
<style lang="scss" scoped>
.register{
    height: 100%;
    background-size: 100%;
    background-image: url("https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fpic1.win4000.com%2Fmobile%2F2020-01-12%2F5e1ad3946b375.jpg&refer=http%3A%2F%2Fpic1.win4000.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1637815759&t=c3bbe84479f21a91de88951b19a9506c");
}
.form{
    padding: 1em;
    margin-top: 60px;
    .re{
        padding-bottom: 2em;
        font-size: 20px;
        font-weight: 700;
        text-align: center;
        text-shadow: 1px 1px 2px #fff;
    }
    
}
.form .radius{
    
        border-top-left-radius: 10px;
        border-top-right-radius: 10px;
    
}
.form .bot{
    
        border-bottom-left-radius: 10px;
        border-bottom-right-radius: 10px;
    
}
</style>